<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
</head>

<body>
    <div id="mountNode"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
    <!-- 4.x and later versions -->
    <!-- <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script> -->
    <script>
        const graph = new G6.Graph({
            container: 'mountNode',
            width: 800,
            height: 600,
            defaultNode: {
                size: 30,
                labelCfg: {
                    style: {
                        fill: '#fff',
                    },
                },
            },
            defaultEdge: {
                labelCfg: {
                    autoRotate: true,
                },
            },
            layout: {
                type: 'force', // 设置布局算法为 force
                linkDistance: 100, // 设置边长为 100
                preventOverlap: true, // 设置防止重叠
            },
        });
        const main = async () => {
            const response = await fetch(
                'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
            );
            const remoteData = await response.json();

            const nodes = remoteData.nodes;
            const edges = remoteData.edges;
            nodes.forEach((node) => {
                if (!node.style) {
                    node.style = {};
                }
                node.style.lineWidth = 1;
                node.style.stroke = '#666';
                node.style.fill = 'steelblue';
                switch (node.class) {
                    case 'c0': {
                        node.type = 'circle';
                        break;
                    }
                    case 'c1': {
                        node.type = 'rect';
                        node.size = [35, 20];
                        break;
                    }
                    case 'c2': {
                        node.type = 'ellipse';
                        node.size = [35, 20];
                        break;
                    }
                }
            });
            edges.forEach((edge) => {
                if (!edge.style) {
                    edge.style = {};
                }
                edge.style.lineWidth = edge.weight;
                edge.style.opacity = 0.6;
                edge.style.stroke = 'grey';
            });

            graph.data(remoteData);
            graph.render();
        };
        main();
    </script>
</body>

</html>